import React, { useState } from 'react';
import { Table, Button,Popconfirm, Input } from 'antd';
import './tableselect.scss';
import { useNavigate } from 'react-router-dom';
const { Search } = Input;

const SelectPage = () => {
  const [searchText, setSearchText] = useState('');
  const [pageSize, setPageSize] = useState(10);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedDelRowKeys, setselectedDelRowKeys] = useState([]);
  const navigate = useNavigate();
  const [originData, setOriginData] = useState([
    {
      key: '1',
      page: '1',
      pagename: '主页',
      pagetitle: '-',
      pagegroup: '-',
      area: '2',
      program: '2',
      buttn: '2',
      process: '2',
      operat: '2',
      date: '2025/02/01 21:00',
      operater: '尚玉晨'
    },
    {
      key: '2',
      page: '122',
      pagename: '项目列表',
      pagetitle: '-',
      pagegroup: '-',
      area: '2',
      program: '2',
      buttn: '2',
      process: '2',
      operat: '2',
      date: '2021/03/01 21:00',
      operater: '蒋彪'
    },
    {
      key: '3',
      page: '13',
      pagename: '登录页',
      pagetitle: '-',
      pagegroup: '-',
      area: '2',
      program: '2',
      buttn: '2',
      process: '2',
      operat: '2',
      date: '2023/12/2 24:00',
      operater: '毛刺激'
    },
    {
      key: '4',
      page: '33232',
      pagename: '指标',
      pagetitle: '-',
      pagegroup: '-',
      area: '2',
      program: '2',
      buttn: '2',
      process: '2',
      operat: '2',
      date: '2025/02/01 21:00',
      operater: '朱光伟'
    },
  ]);
  const onSearch = (value) => {
    setSearchText(value);
  };
  const filteredData = originData.filter(item =>
    Object.values(item).some(value =>
      value && String(value).toLowerCase().includes(searchText.toLowerCase()) // 先检查 value 是否存在
    )
  );
  const columns = [
    { title: '页', dataIndex: 'page', key: 'page',align: 'left',width:100, render: (text) => (
      <span
        style={{ color: '#1890ff', cursor: 'pointer' }}
        onClick={() => navigate(`/page/${text}`)}
      >
        {text}
      </span>
    ) },
    { title: '页名', dataIndex: 'pagename', key: 'pagename',align: 'left',width:130 },
    { title: '页标题', dataIndex: 'pagetitle', key: 'pagetitle',align: 'left',width:150 },
    { title: '页组', dataIndex: 'pagegroup', key: 'pagegroup',align: 'left',width:80 },
    { title: '区域', dataIndex: 'area', key: 'area',align: 'left',width:80 },
    { title: '项', dataIndex: 'program', key: 'program',align: 'left',width:80 },
    { title: '按钮', dataIndex: 'buttn', key: 'buttn',align: 'left',width:80 },
    { title: '处理', dataIndex: 'process', key: 'process',align: 'left',width:80 },
    { title: '动态操作', dataIndex: 'operat', key: 'operat',align: 'left',width:80 },
    { title: '日期', dataIndex: 'date', key: 'date',align: 'left',width:150 },
    { title: '更新者', dataIndex: 'operater', key: 'operater',align: 'left',width:130 },
  ];


  const handleDelete = () => {
    const newData = originData.filter(item => !selectedRowKeys.includes(item.key));
    setOriginData(newData);
    setselectedDelRowKeys(selectedRowKeys)
    setSelectedRowKeys('')
  };
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 统一修改按钮：将选中的行数据传递给编辑页面
  const handleUnifiedEdit = () => {
    const selectedData = originData.filter(item => 
      selectedRowKeys.includes(item.key),
    );
    
    navigate('tableedit', { 
      state: { 
        selectedDelRowKeys: selectedDelRowKeys,
        selectedKeys: selectedRowKeys,
      } 
    });
  };

  return (
    <div style={{ padding: '16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Button
            type="primary"
            onClick={handleUnifiedEdit}
            style={{ marginLeft: '5px', borderRadius: '3px', padding: '16px' }}
            disabled={selectedRowKeys.length === 0}
          >
            编辑所选页
          </Button>
          <Popconfirm
            title="确定要删除吗？"
            onConfirm={handleDelete}
            okText="是"
            cancelText="否"
          >
            <Button
              type="primary"
              style={{ marginLeft: '15px', borderRadius: '3px', padding: '16px' }}
              disabled={selectedRowKeys.length === 0}
            >
              删除所选页
            </Button>
          </Popconfirm>
        </div>
        
        {/* 搜索框靠右 */}
        <Search placeholder="搜索" onSearch={onSearch} style={{ width: 200, marginRight:'20px' }} />
      </div>
      {/* {selectedRowKeys.length > 0 ? ` Selected ${selectedRowKeys.length} items` : null} 动态显示选中了多少页*/}
      <Table
        rowSelection={rowSelection}
        columns={columns}
        bordered
        // tableLayout="fixed"
        dataSource={filteredData}
        pagination={{
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          onShowSizeChange: (current, size) => setPageSize(size),
        }}
        className="custom-table"
        style={{ marginLeft:'5px',marginRight:'25px',marginTop: '16px'}}
      />
    </div>
  );
};

export default SelectPage;